<template>
	<view>
		<u-tabbar :value="index" @change="tabBarChange"  :safeAreaInsetBottom="true"
			activeColor="#1057FC"> 
			<u-tabbar-item text="首页">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[0].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[0].iconPath"></image>
				</template>
			</u-tabbar-item>
 
			<u-tabbar-item :text="list[1].text">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[1].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[1].iconPath"></image>
				</template>
			</u-tabbar-item>
 
			<u-tabbar-item :text="list[2].text">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[2].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[2].iconPath"></image>
				</template>
			</u-tabbar-item>
 
			<u-tabbar-item  :text="list[3].text"  @click="showmenu">
				<template #active-icon    @click="showmenu">
					<image class="u-page__item__slot-icon" :src="list[3].selectedIconPath" ></image>
				</template>
				<template #inactive-icon   @click="showmenu">
					<image class="u-page__item__slot-icon" :src="list[3].iconPath" ></image>
				</template>
			</u-tabbar-item>
 
			<u-tabbar-item :text="list[4].text">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="list[4].selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="list[4].iconPath"></image>
				</template>
			</u-tabbar-item>
		</u-tabbar>
				 
		<view v-if="show" mode="slide-up">
		   <view class="popmenu">
				 <view>
					<image  class="closebtn"  :src="imglist[2].path"  @click="show=false" ></image>	
				   <view class="issue-item">
						<view class="issue-item-buy" @click="toQuery">
							<image  class="imgicon"  :src="imglist[0].path"  ></image>					 
							<text style="padding: 0rpx 10rpx; font-size: 32rpx; color: #212121;">股权投资</text>
						</view>
						<view class="issue-item-sell" @click="toPhjr">
							<image class="imgicon":src="imglist[1].path"  ></image>
							<text style="padding: 0rpx 10rpx; font-size: 32rpx; color: #212121;">普惠金融</text>
						</view>
				   </view>
				 </view>
				 
		   </view>
		</view>
		 
<!-- 		<view>
			<u-popup :overlayOpacity="0.6" :round="10" :show="show" @close="close" @open="open">
				<view class="issue-item">
					 		
					<view class="issue-item-buy" @click="toQuery">
						<image  class="imgicon"  :src="imglist[0].path"  ></image>					 
						<text style="padding: 0rpx 10rpx; font-size: 32rpx; color: #212121;">企业查询</text>
					</view>
					<view class="issue-item-sell" @click="toPhjr">
						<image class="imgicon":src="imglist[1].path"  ></image>
						<text style="padding: 0rpx 10rpx; font-size: 32rpx; color: #212121;">普惠金融</text>
					</view>
				</view>
			</u-popup>
		</view> -->
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				show: false,
				imglist:[					 
					{path: 'https://www.xrskfw.com/files/xrsk/wxsapp/images/gqtz.png'},
					{path: 'https://www.xrskfw.com/files/xrsk/wxsapp/images/phjr.png'},
					{path: 'https://www.xrskfw.com/files/xrsk/wxsapp/images/gb.png'} 
					],
				list: [ 
					{
						"pagePath": "/pages/home/home",
						"iconPath": "https://www.xrskfw.com/static/images/tabbar/home.png",
						"selectedIconPath": "https://www.xrskfw.com/static/images/tabbar/home_selected.png",
						"text": "首页"
					}, {
						"pagePath": "/pages/news/list",
						"iconPath": "https://www.xrskfw.com/static/images/tabbar/demo.png",
						"selectedIconPath": "https://www.xrskfw.com/static/images/tabbar/demo_selected.png",
						"text": "行业动态"
					}, 
				 
					{
						"pagePath": "/pages/company/company_search",
						"iconPath":  "https://www.xrskfw.com/files/xrsk/wxsapp/navbar/qycx.png",
						"selectedIconPath": "https://www.xrskfw.com/files/xrsk/wxsapp/navbar/qycx_select.png",
						"text": "企业查询"
					},
					{
						"pagePath": "/pages/investment/investment",
						"iconPath": "https://www.xrskfw.com/files/xrsk/wxsapp/navbar/qyfw.png",
						"selectedIconPath": "https://www.xrskfw.com/files/xrsk/wxsapp/navbar/qyfw_xz.png",
						"text": "企业服务"
					}, {
						"pagePath": "/pages/user/center",
						"iconPath": "https://www.xrskfw.com/static/images/tabbar/user.png",
						"selectedIconPath": "https://www.xrskfw.com/static/images/tabbar/user_selected.png",
						"text": "我的"
					}
				]
			}
		},
		computed: {
			index() {			 
				return this.$store.state.tabbarIndex
			}
		},
		methods: {
			tabBarChange(e) {
				this.$u.vuex("tabbarIndex",e) 
				 
				const that = this.list[e] 
				if(e!==3){
					uni.reLaunch({
						url:that.pagePath
					})
				}else{
					// this.show = !this.show ;
				}
			 
			 
				
				console.log('eeeeeeeeeeeeeee',e)
			},
			showmenu(){
				this.$u.vuex("tabbarIndex",2) 
				this.show = !this.show;
			},
			//点击发布按钮的弹出层
			open() {
				console.log('open');
			},
			close() {
				this.show = false;
				console.log('close');
			},
			//点击我要卖
			toQuery() {
				console.log("点击了");
				uni.reLaunch ({
					url: '/pages/investment/investment',
				})
			},
			toPhjr() {
				console.log("点击了");
				uni.reLaunch ({
					url: '/pages/phjr/phjr'
				})
			}
		}
	}
</script>
 
<style lang="scss">
	.closebtn{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	.imgicon {
		width: 60rpx;
		height: 60rpx;
	}
	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}
 
	.u-page__item__slot-icon-big {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 50rpx;
	}
 
	.issue-item {
		position: relative;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;			
	}
	.issue-item-buy,
	.issue-item-sell {
		display: flex;
		width: 40%;
		height: 100rpx;
		font-size: 28rpx;
		border-radius: 20rpx;		
		margin: 40rpx;
		padding: 0rpx 20rpx;
		background-color: #dddddd55;
		line-height: 100rpx;
		text-align: center;
		align-items: center;
	}
	.popmenu{
		display: flex; justify-content: center; align-items: center;
		position: fixed;  
		left: 0rpx; 
		height: 300rpx;
		bottom: 102rpx; 
		width: 100%;  
		backdrop-filter: blur(60px);
		background-color: #fff;			 
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-top: 1rpx solid #dddddd;
		box-shadow: rgba(34, 47, 62, 0.2) 0 -5px 15px -5px;
	}
</style>